<template>
<div class="content-list">
  <div class="cl-left">
    <recommend-view>
      <template v-slot:title>
        <span>留言</span>
      </template>
      <template v-slot:content>
        <message-box/>
        <remark-head/>
        <new-message/>
      </template>
    </recommend-view>
  </div>
  <div class="cl-right">
    <div class="cl-ri-b">
      <recommend-view>
        <template v-slot:title>
          <span>热门标签</span>
        </template>
        <template v-slot:content>
          <hot-tag/>
        </template>
      </recommend-view>
    </div>
    <div class="cl-ri-b">
      <recommend-view>
        <template v-slot:title>
          <span class="recom-span">点击排行</span>
        </template>
        <template v-slot:content>
          <article-item :hotList="hotList"/>
        </template>
      </recommend-view>
    </div>
  </div>
</div>
</template>

<script>
import {request} from 'network/request'
import RecommendView from 'components/content/recommendview/RecommendView'
import ArticleItem from 'components/content/article/ArticleItem'
import MessageBox from 'components/content/messagebox/MessageBox'
import NewMessage from 'components/content/messagebox/NewMessage'
import RemarkHead from 'components/content/comment/RemarkHead'
import HotTag from 'components/content/hottag/HotTag'

export default{
  name: 'messagemain',
  components: {
    RecommendView,
    ArticleItem,
    MessageBox,
    NewMessage,
    RemarkHead,
    HotTag
  },
  data () {
    return {
      /**
       * 热门文章的列表
       */
      hotList: []
    }
  },
  mounted () {
    /**
     * 初始化右侧热门博客文章，
     */
    this.getBlogListByHot();
  },
  methods: {
    /**
    *  获取热门文章列表
    */
    getBlogListByHot(){
      request({
        url:'/blog/getBlogListByHot',
        method: 'get'
      }).then(response => {
        this.hotList = response.data
      }).catch(error => {
        this.$message.error('请求数据失败')
      })
    }
  }

}
</script>

<style scoped>
.cl-right span, .cl-left span{
  font-size: 20px;
}
.cl-ri-b{
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 3px 1px #a1a1a18e;
}
</style>
